<script setup lang="ts">
import {User} from "@element-plus/icons-vue";
import Visitor from "@/components/visitor/Visitor.vue";
import {onMounted, reactive, ref, watch} from "vue";
import {UserArr, UserResponseData} from "@/api/hospital/type.ts";
import {reqGetAllUser} from "@/api/hospital";
import {reqAddOrUpdateUser, reqCertationType, reqCity} from "@/api/user/user.ts";
import {CertationTypeResponseData, CertationArr, AddOrUpdateUser} from "@/api/user/type.ts";
import {CascaderProps, ElMessage} from "element-plus";
import {useRoute, useRouter} from "vue-router"
const $route = useRoute()
const $router = useRouter()
//用户数组
let userInfo = ref<UserArr>([])
/**
 * 获取所有就诊人
 */
async function getUserInfo(){
  let res:UserResponseData = await reqGetAllUser()
  if(res.code==200){
    userInfo.value=res.data
  }
}
//收集新增就诊人的数据
let userParams = reactive<AddOrUpdateUser>({
  name: '',
  certificatesType: '',
  certificatesNo: '',
  sex: 0,
  birthdate: '',
  phone: '',
  isMarry: 0,
  isInsure: 0,
  addressSelected:[],
  address: '',
  contactsName: '',
  contactsCertificatesType: '',
  contactsCertificatesNo: '',
  contactsPhone: '',
})
//控制编辑病人表单显示隐藏
let showForm = ref<boolean>(true)
/**
 * 子组件触发该方法
 */
function changeShowForm1(visitor:AddOrUpdateUser){
  showForm.value=false
  Object.assign(userParams,visitor)
  // console.log(visitor)
}
//存储身份信息
let idCardType = ref<CertationArr>()
/**
 * 获取所有的身份信息证明
 */
async function getIdCardType(){
  let res:CertationTypeResponseData =await reqCertationType()
  if(res.code==200){idCardType.value=res.data}
}
/**
 * 地址的选择
 */
const cities:CascaderProps = {
  lazy: true,//懒加载数据
  async lazyLoad(node, resolve) {
    let res:any =await reqCity(node?.data?.id as string||'86')
    let cityData = res.data.map(((item:any) =>{return {label:item.name, value:item.value,leaf:!item.hasChildren,id:item.id}}))
    // console.log(cityData)
    resolve(cityData)
  },
}
/**
 * 提交按钮的方法的回调
 */
async function submitForm(){
  try{
    let res:any = await reqAddOrUpdateUser(userParams)
    if(res.code==200){
      ElMessage({type:'success',message:userParams.id?'更新成功':'新增成功'})
      await getUserInfo()
      if($route.query.type){
        $router.back()
      }else {
        showForm.value=true
      }
      clearForm()
    }
  }catch (e:any){
    ElMessage({type:'error',message:e.message as string})
  }
}
/**
 * 清空表单的方法
 */
function clearForm(){
  Object.assign(userParams,{
    id:'',
    name: '',
    certificatesType: '',
    certificatesNo: '',
    sex: 0,
    birthdate: '',
    phone: '',
    isMarry: 0,
    isInsure: 0,
    addressSelected:[],
    address: '',
    contactsName: '',
    contactsCertificatesType: '',
    contactsCertificatesNo: '',
    contactsPhone: '',
  })
}
/**
 * 不添加就诊人返回原来的模块
 */
function goBack(){
  showForm.value=true
}
onMounted(()=>{
  //获取就诊人信息
  getUserInfo()
  //获取证件类型
  getIdCardType()
  //判断是不是从预约挂号而来
  showForm.value = $route.query.type != 'add';
})
watch(
    ()=>$route.query.type,
    ()=>{
      showForm.value = $route.query.type != 'add';
      console.log(showForm.value)
    })
//监视路由不同页面跳转过来的对应不同的操作
watch(
  ()=>userInfo.value,
  ()=>{
    if($route.query.type=='edit'){
      showForm.value=false
      let user = userInfo.value.find((item:any)=>{
        return item.id==$route.query.id
      })
      Object.assign(userParams,user)
  }
})
</script>
<template>
<div class="patient">
  <el-card class="box-card" :shadow="'never'">
    <template #header>
      <div class="card-header">
        <span>就诊人管理</span>
        <div>
          <el-button class="button" :icon="User" @click="goBack">返回</el-button>
          <el-button class="button" type="success" :icon="User" @click="changeShowForm1">添加就诊人</el-button>
        </div>
      </div>
    </template>
    <div class="visitorInfo"  v-show="showForm">
      <Visitor v-for="(visitor,index) in userInfo" v-bind:visitor="visitor" v-bind:key="index" v-bind:currentIndex="-1" @changeShowForm="changeShowForm1" v-bind:getUserInfo="getUserInfo"></Visitor>
    </div>
    <div class="addVisitor" v-show="!showForm">
      <el-divider content-position="left">就诊人信息</el-divider>
      <el-form label-width="80" style="width: 60%;margin: 0 auto;" :model="userParams">
        <el-form-item label="用户姓名">
          <el-input placeholder="请输入用户的姓名" v-model="userParams.name"/>
        </el-form-item>
        <el-form-item label="证件类型" >
          <el-select  placeholder="请选择户籍类型" style="width: 100%;" v-model="userParams.certificatesType">
            <el-option
                v-for="item in idCardType"
                :key="item.id"
                :label="item.name"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="证件号码">
          <el-input placeholder="请输入证件号码" v-model="userParams.certificatesNo"/>
        </el-form-item>
        <el-form-item label="用户性别">
          <el-radio-group v-model="userParams.sex">
            <el-radio :label="0" size="large">女</el-radio>
            <el-radio :label="1" size="large">男</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="出生日期">
          <el-date-picker
              v-model="userParams.birthdate"
              type="date"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              placeholder="请选择日期"
          />
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input placeholder="请输入手机号码" v-model="userParams.phone"/>
        </el-form-item>
      </el-form>

      <el-divider content-position="left">建档信息（完善后部分医院首次就诊不排队建档）</el-divider>
      <el-form label-width="80" style="width: 60%;margin: 0 auto;">
        <el-form-item label="婚姻状况">
          <el-radio-group v-model="userParams.isMarry">
            <el-radio :label="0" size="large">未婚</el-radio>
            <el-radio :label="1" size="large">已婚</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="自费/医保">
          <el-radio-group v-model="userParams.isInsure">
            <el-radio :label="1" size="large">自费</el-radio>
            <el-radio :label="0" size="large">医保</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="当前住址">
          <el-cascader placeholder="请选择地址" :props="cities" v-model="userParams.addressSelected"/>
        </el-form-item>
        <el-form-item label="详细地址">
          <el-input placeholder="请你输入用户详细地址" v-model="userParams.address"/>
        </el-form-item>
      </el-form>

      <el-divider content-position="left">联系人信息（选填）</el-divider>
      <el-form label-width="80" style="width: 60%;margin: 0 auto;">
        <el-form-item label="用户姓名">
          <el-input placeholder="请输入用户的姓名" v-model="userParams.contactsName"/>
        </el-form-item>
        <el-form-item label="证件类型" >
          <el-select  placeholder="请选择户籍类型" style="width: 100%;" v-model="userParams.contactsCertificatesType">
            <el-option
                v-for="item in idCardType"
                :key="item.id"
                :label="item.name"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="证件号码">
          <el-input placeholder="请输入证件号码" v-model="userParams.contactsCertificatesNo"/>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input placeholder="请输入手机号码" v-model="userParams.contactsPhone"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button type="primary" @click="clearForm">重写</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-card>
</div>
</template>

<style scoped lang="scss">
.patient{
  padding: 30px 20px;
  .card-header{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .visitorInfo{
    display: flex;
    flex-wrap: wrap;
  }
}
</style>